<template>
  <!-- 我的咨询 -->
  <div class="myAppDeail">
    <Tabs value="all" @on-click="change">
      <TabPane
        v-for="item in tabsArr"
        :key="item.name"
        :label="item.label"
        :name="item.name"
        :data="array1"
      >
        <div class="all-content">
          <Table height="440" border :columns="columns1" :data="array1">
            <template slot-scope="{ row }" slot="order">
              <div class="expertItem">
                <img
                  :src="row.trainingBaseCover"
                  alt=""
                  style="
                    width: calc(150 / 1920 * 100vw);
                    height: calc(150 / 1920 * 100vw);
                  "
                />
                <div class="expertInfo">
                  <div>{{ row.trainingBaseName }}</div>
                  <div>{{ row.sn }}</div>
                  <div>{{ row.createTime }}</div>
                </div>
              </div>
            </template>
            <template slot-scope="{ row }" slot="time" class="card">
              <div v-for="a in row.trainingBaseTimeStr.split(',')">{{ a }}
                <span v-if="row.isCharge == '1'">{{row.unitPrice}}元/小时</span>
                <span v-else>免费</span>
              </div>
            </template>
            <template slot-scope="{ row }" slot="more" class="card">
              <div v-if="row.payStatus == 'PAID'">{{row.isCharge == '1' ? '已付：' +  row.actualPay : '免费'}}</div>
              <div v-if="row.payStatus == 'UNPAID'">{{row.isCharge == '1' ? '应付：' + row.actualPay : '免费'}}</div>
              <div v-if="row.payStatus == 'CANCEL'">{{row.isCharge == '1' ? '已退款：' + row.actualPay : '免费'}}</div>
            </template>
            <template slot-scope="{ row }" slot="status" class="card">
              <div>
                <span class="round" :class="formatStatus(row.status)"></span>
                <span>{{
                  row.status == 0
                    ? "待付款"
                    : row.status == 1
                    ? "未开始"
                    : row.status == 2
                    ? "进行中"
                    : row.status == 3
                    ? "已结束"
                    : "已取消"
                }}</span>
              </div>
            </template>
            <template slot-scope="{ row }" slot="operation">
              <div
                v-if="(row.status == '2' || row.status == '3') && row.isEvaluate == '1'"
                class="btn"
                @click="handelEvaluation(row)"
              >
                立即评价
              </div>
              <div
                v-if="row.payStatus != 'CANCEL' && row.status != 3 && row.status != 4"
                class="btnCancel"
                @click="handelCancel(row)"
              >
                取消预约
              </div>
              <div
                v-if="row.status == 0 && row.payStatus == 'UNPAID'"
                class="btnGo"
              >
                去支付
              </div>
            </template>
          </Table>
          <div class="page">
            <Page
              :total="total"
              :page-size="param.rows"
              size="small"
              show-sizer
              show-total
              show-elevator
              @on-change="currentHandle"
              @on-page-size-change="sizeChange"
            />
          </div>
        </div>
      </TabPane>
    </Tabs>
    <div class="seachCla">
      <Date-picker v-model="param.searchTimeBegin" type="date" @on-change="dataChange" format="yyyy-MM-dd" placeholder="选择日期" style="width: 200px"></Date-picker>
      <Input v-model="param.trainingName" @on-search="getConsultList" search placeholder="请输入基地名称" style="width: 200px;margin-left: 60px"></Input>
    </div>
    <!-- 取消 -->
    <Modal
      v-model="cancelModal"
      title="取消预约"
      width="800"
      @on-cancel="cancelModal = false"
      class="cancelClass"
    >
      <div class="modelCla">
        <Row justify="start" class="titleCla">
          <Col span="12">订单号：{{cancelForm.sn}}</Col>
          <Col span="12">{{cancelForm.createTime}}</Col>
        </Row>
        <Row justify="start" class="contCla">
          <Col span="10">
            <div style="text-align: center">
              <img :src="cancelForm.trainingBaseCover" alt="" style="width: 150px;height: 150px">
            </div>
            <div class="contCla-item" style="padding: 15px;font-weight: bold;font-size: 14px">{{cancelForm.trainingBaseName}}</div>
            <div class="contCla-item" v-for="item in cancelForm.trainingBaseTimeStr.split(',') || []" :key="item">
              {{item}}
            </div>
            <div class="contCla-item" style="padding: 5px 0;font-weight: bold">
              <span>{{cancelForm.isCharge == '0' ? '免费' : !cancelForm.actualPay ? "￥" + '0' : cancelForm.actualPay }}</span>
              <span style="color: #19be6b;padding-left: 10px">{{cancelForm.payStatus == 'PAID' ? '已支付' : '应付'}}</span>
            </div>
          </Col>
          <Col span="14">
            <Form ref="cancelForm" :model="cancelForm" :label-width="80">
              <Form-item label="预约用户">
                <span>{{cancelForm.username}}</span>
                <Button type="warning" style="margin-left: 10px">
                  {{ cancelForm.userType == '0' ? '学生' : cancelForm.userType == '1' ? '教师' : '社会人员'}}
                </Button>
              </Form-item>
              <Form-item label="联系电话" >
                <span>{{cancelForm.memberPhone}}</span>
              </Form-item>
              <Form-item label="所在单位" disabled prop="age">
                <span>{{cancelForm.memberSite}}</span>
              </Form-item>
              <Form-item label="取消事由" prop="age">
                <Input type="textarea" placeholder="请输入取消事由" :autosize="{minRows: 5,maxRows: 7}" v-model="cancelForm.remarks"></Input>
              </Form-item>
            </Form>
          </Col>
        </Row>
      </div>
      <div slot="footer">
        <Button type="error" size="large" @click="submitCancel">提交</Button>
      </div>
    </Modal>
    <!-- 评价 -->
    <Modal
      v-model="evaluationModal"
      title="评价"
      width="700"
      @on-cancel="evaluationModal = false"
    >
      <Form
        ref="form"
        :model="form"
        :rules="ruleInline"
        :label-width="120"
        style="width: 90%"
      >
        <FormItem prop="grade" label="实训评分">
          <div style="display: flex;justify-items: flex-start;align-items: center">
            <Rate v-model="form.grade" />
            <span style="font-size: 12px;color: #d3d3d3">{{formGradeText(form.grade)}}</span>
          </div>
        </FormItem>
        <FormItem prop="userEvaluate" label="实训评价">
          <i-input
            v-model="form.userEvaluate"
            clearable
            maxlength="500"
            :rows="5"
            show-word-limit
            type="textarea"
            placeholder="实训怎么样？快来说说学习感受吧~"
          >
          </i-input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="error" size="large" @click="submit">发表</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
  import {getAppDeailpage,getBaseChildTextId,getAppDeailId,setAppDeailStatus} from "@/api/yk_record"
  export default {
    components: {},
    data() {
      return {
        //评价字段
        evaluationModal: false,
        form: {
          grade: 0,
          baseId: '',
          userEvaluate: "",
          evaluateType: "0",
          pid: "0",
          trainingBaseOrderId: "",
        },
        total: 0,
        // 表格标题
        columns1: [
          {
            title: "预约基地",
            key: "order",
            slot: "order",
            minWidth: 250,
          },
          {
            title: "预约时段",
            key: "time",
            slot: "time",
            align: "center",
          },
          {
            title: "收费标准",
            key: "unitPrice",
            align: "center",
          },
          {
            title: "金额",
            key: "time",
            slot: "more",
            align: "center",
          },
          {
            title: "状态",
            slot: "status",
            key: "status",
            align: "center",
          },
          {
            title: "操作",
            key: "operation",
            slot: "operation",
            align: "center",
          },
        ],
        array1: [],
        param: {
          searchTimeBegin:'',
          trainingName:'',
          searchStatus: null,
          page: 1,
          rows: 10,
        },
        tabsArr: [
          {
            label: "全部订单",
            name: "all",
          },
          {
            label: "交易完成",
            name: "3",
          },
          {
            label: "待支付",
            name: "1",
          },
          {
            label: "交易取消",
            name: "4",
          },
        ],
        ruleInline: {},
        // 取消预约字段
        cancelModal:false,
        cancelForm: {
          sn: '',//订单号
          createTime: '',//创建时间
          trainingBaseCover: '',//封面
          trainingBaseName: '',//基地名称
          trainingBaseTimeStr: '',//时间段
          isCharge: '',//是否免费
          status: '',//支付状态
          username: '',//用户名称
          userType: '',//用户类型
          memberPhone: '',//用户联系电话
          memberSite: '',//用户所在单位
          remarks: '',//取消事由
        }
      };
    },
    mounted() {
      this.getConsultList();
    },
    methods: {
      currentHandle(current) {
        this.param.page = current;
        this.getConsultList();
      },
      sizeChange(size) {
        this.param.rows = size;
        this.getConsultList();
      },
      formGradeText(num){
        let str = "";
        switch (num) {
          case 1:
            str = "差评！课程太差了，我要吐槽!";
            break;
          case 2:
            str = "勉强中评！课程不满意";
            break;
          case 3:
            str = "中评！课程一般";
            break;
          case 4:
            str = "好评！课程还不错，继续保持！";
            break;
          case 5:
            str = "五星好评！课程非常棒，点赞！";
            break;
          default:
        }
        return str;
      },
      formatStatus(status) {
        let str = "";
        switch (status) {
          case '0':
            str = "orange";
            break;
          case '1':
            str = "red";
            break;
          case '2':
            str = "greenColor";
            break;
          case '3':
            str = "gray";
            break;
          case '4':
            str = "cancel";
            break;
          default:
        }
        return str;
      },
      getConsultList() {
        this.array1 = [];
        getAppDeailpage(this.param).then((res) => {
          const {code, result: { records, total }} = res;
          if (code == 200) {
            this.total = Number(total);
            this.array1 = records;
          }
        });
      },
      change(v) {
        this.param.searchStatus = v == "all" ? null : v;
        this.getConsultList();
      },
      cancel() {
        this.evaluationModal = false;
        this.form = {
            grade: 0,
            baseId: '',
            userEvaluate: "",
            evaluateType: "0",
            pid: "0",
            trainingBaseOrderId: "",
        }
      },
      //立即评价
      handelEvaluation(row) {
        this.form.grade = 0
        this.form.userEvaluate = ''
        this.form.baseId = row.trainingBaseId;
        this.form.trainingBaseOrderId = row.id;
        this.evaluationModal = true;
      },
      // 发表
      submit() {
        getBaseChildTextId(this.form).then((res) => {
          const { code, message } = res;
          if (code == 200) {
            this.$Message.success("评价成功");
            this.getConsultList();
            this.evaluationModal = false;
          } else {
            this.$Message.error(message);
          }
        });
      },
      handelCancel(row){
        this.cancelModal = true
        for (let item of Object.keys(this.cancelForm)) {
          this.cancelForm[item] = "";
        }
        this.cancelForm.id = row.id
        this.getCancelInfo(row.id)
      },
      getCancelInfo(id){
        getAppDeailId(id).then((res) => {
          const { code,result, message } = res;
          if (code == 200) {
            this.cancelForm = Object.assign(this.cancelForm, result);
          } else {
            this.$Message.error(message);
          }
        });
      },
      //取消预约
      submitCancel(){
        let params = {
          id: this.cancelForm.id,
          remarks: this.cancelForm.remarks
        }
        setAppDeailStatus(params).then((res) => {
          const { code, message } = res;
          if (code == 200) {
            this.$Message.success("取消成功");
            this.cancelModal = false;
            this.getConsultList();
          } else {
            this.$Message.error(message);
          }
        });
      },
      dataChange(e){
        this.param.searchTimeBegin = e
        this.getConsultList()
      }
    },
  };
</script>
<style lang="scss" scoped>
  .myAppDeail{
    position: relative;
    .seachCla{
      position: absolute;
      right: 0;
      top: -2px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }
  .all-content {
    width: 100%;
    display: flex;
    flex-direction: column;

    .page {
      margin-left: auto;
      margin-top: calc(40 / 1920 * 100vw);
    }
  }
  .expertItem {
    display: flex;
    justify-content: center;
    padding: 5px 0;
    .expertInfo {
      margin-left: calc(30 / 1920 * 100vw);
      margin-top: calc(20 / 1920 * 100vw);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      >div:nth-child(2){
        padding:10px 0;
      }
    }
  }
  // 状态区分颜色
  .orange {
    background: #ffb445 !important;
  }
  .red {
    background: #fd5151 !important;
  }
  .greenColor {
    background: #ecff16 !important;
  }
  .gray {
    background: #ededed !important;
  }
  .cancel {
    background: #c1360f !important;
  }
  .round {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 100%;
    background: #fff;
    margin-right: 5px;
  }
  .btn {
    cursor: pointer;
    color: #ffb445;
  }
  .btnCancel{
    cursor: pointer;
    color: #d5d2d7;
  }
  .btnGo{
    cursor: pointer;
    color: #bd990c;
  }
  .modelCla{
    padding: 10px 40px;
    .titleCla{
      padding-bottom: 10px;
      border-bottom: 2px #dcdcdc solid;
    }
    .contCla{
      padding: 20px 30px;
      .contCla-item{
        text-align: center;
        padding: 5px 0;
      }
    }
  }

</style>
<style lang="less">
 .cancelClass .ivu-modal-header,
 .cancelClass .ivu-modal-footer{
    border: none;
  }
</style>
